<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../vue_lib/vue.js"></script>
    <title>表单输入绑定</title>
</head>
<body>
<div id="app">
    <div id="example-1">
        <input v-model="message" placeholder="编辑我">
        <p>您输入的是：{{ message }}</p>
        <textarea v-model="message2" placeholder="编辑多行文本："></textarea>
        <p style="white-space: pre-line">多行文本输入的是：{{ message2 }}</p>
    </div>
    <div>
        <input type="checkbox" id="wing" value="Wing" v-model="checkNames">
        <label for="wing">Wing</label>
        <input type="checkbox" id="king" value="Kings" v-model="checkNames">
        <label for="king">Kings</label>
        <input type="checkbox" id="apple" value="Apple" v-model="checkNames">
        <label for="apple">Apple</label>
        <br>
        <p>复选框选中的是：{{ checkNames}}</p>
    </div>
    <div>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <p>单选按钮选中的是：{{ picked }}</p>
    </div>
    <div>
        <button type="button" @click="submit">提交</button>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Vue",
            message2: "vue hello",
            checkNames: ['Kings'],
            picked: "One"
        },
        methods: {
            submit: function () {
                var obj ={
                    msg1:this.message,
                    msg2:this.message2,
                    check1:this.checkNames
                }
                console.log(obj)
                console.log(this.message);

            }
        }
    })
</script>

</body>
</html>